<style>
    .welcome .layui-card {
        border: 1px solid #f2f2f2;
        border-radius: 5px;
    }

    .welcome .icon {
        margin-right: 10px;
        color: #1aa094;
    }

    .welcome .icon-cray {
        color: #ffb800 !important;
    }

    .welcome .icon-blue {
        color: #1e9fff !important;
    }

    .welcome .icon-tip {
        color: #ff5722 !important;
    }

    .welcome .layuimini-qiuck-module {
        text-align: center;
        margin-top: 10px
    }

    .welcome .layuimini-qiuck-module a i {
        display: inline-block;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-radius: 2px;
        font-size: 30px;
        background-color: #F8F8F8;
        color: #333;
        transition: all .3s;
        -webkit-transition: all .3s;
    }

    .welcome .layuimini-qiuck-module a cite {
        position: relative;
        top: 2px;
        display: block;
        color: #666;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
    }

    .welcome .welcome-module {
        width: 100%;
        height: 210px;
    }

    .welcome .panel {
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
    }

    .welcome .panel-body {
        padding: 10px
    }

    .welcome .panel-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 12px;
        color: inherit
    }

    .welcome .label {
        display: inline;
        padding: .2em .6em .3em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em;
        margin-top: .3em;
    }

    .welcome .layui-red {
        color: red
    }

    .welcome .main_btn > p {
        height: 40px;
    }

    .welcome .layui-bg-number {
        background-color: #F8F8F8;
    }

    .welcome .layuimini-notice:hover {
        background: #f6f6f6;
    }

    .welcome .layuimini-notice {
        padding: 7px 16px;
        clear: both;
        font-size: 12px !important;
        cursor: pointer;
        position: relative;
        transition: background 0.2s ease-in-out;
    }

    .welcome .layuimini-notice-title, .layuimini-notice-label {
        padding-right: 70px !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    .welcome .layuimini-notice-title {
        line-height: 28px;
        font-size: 14px;
    }

    .welcome .layuimini-notice-extra {
        position: absolute;
        top: 50%;
        margin-top: -8px;
        right: 16px;
        display: inline-block;
        height: 16px;
        color: #999;
    }

    <!--
    .layui-col-md6 {
    --> <!-- width: 100 %;
    --> <!--
    }

    -->
</style>
<script>
    // 创建一个新的link元素
var link = document.createElement('link');

// 设置link元素的属性
link.rel = 'shortcut icon';
link.type = 'image/png';
link.href = '/static/layui/page/favicon.png';

// 获取head元素并将link元素添加到其中
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);

</script>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-row layui-col-space12">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>CSGO饰品统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space12">
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>总库存</h5>
                                                    </div>
                                                    <div class="panel-content" id="total_item">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>总购入价</h5>
                                                    </div>
                                                    <div class="panel-content" id="total_buy_price">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>总现价</h5>
                                                    </div>
                                                    <div class="panel-content" id="total_current_price">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>总租金</h5>
                                                    </div>
                                                    <div class="panel-content" id="total_rent">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>总租金收益</h5>
                                                    </div>
                                                    <div class="panel-content" id="rent_interest">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>总收益</h5>
                                                    </div>
                                                    <div class="panel-content" id="total_interest">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>过去7天收益</h5>
                                                    </div>
                                                    <div class="panel-content" id="last_7d_rent">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>过去14天收益</h5>
                                                    </div>
                                                    <div class="panel-content" id="last_14d_rent">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <h5>过去30天收益</h5>
                                                    </div>
                                                    <div class="panel-content" id="last_30d_rent">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                            <div class="layui-card-body">
                                <div id="echarts-records" style="width: 100%;min-height:500px"></div>
                            </div>
                            <div class="layui-card-body">
                                <div id="month-records" style="width: 100%;min-height:500px"></div>
                            </div>
                            <div class="layui-card-body">
                                <div id="interest-rate" style="width: 100%;min-height:500px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/layui/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/static/layui/js/get_sessionstorage.js"></script>
<script>
    async_set_stock_cache()
    var formObject1 = {};
    formObject1["type"] = 5;
    var data_obj = JSON.stringify(formObject1);
    $.ajax({
        type: 'POST',
        url: "/api/csgostockrent",
        data: data_obj,
        dataType: "json",
        contentType: 'application/json',
        async: true,
        success: function (result) {
            if (result.success == "true") {
                for (var i in result.data) {
                    ele_id = "#" + i;
                    $(ele_id).append("<h1 class='no-margins'>" + result.data[i] + "</h1>");
                }
            }
        }, error: function (result) {
            console.log(result);
        }
    });
    layui.use(['echarts'], function () {
        var $ = layui.jquery,
            echarts = layui.echarts;
        /**
         * 日租金报表
         */
        var formObject = {};
        formObject["type"] = 4;
        var data_obj = JSON.stringify(formObject);
        $.ajax({
            type: 'POST',
            url: "/api/csgostockrent",
            data: data_obj,
            dataType: "json",
            contentType: 'application/json',
            async: true,
            success: function (result) {
                if (result.success == "false") {
                } else if (result.exception == "true") {
                    alert("服务器异常");
                } else if (result.success == "true") {
                    var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
                    var rent_by_month = echarts.init(document.getElementById('month-records'), 'walden');
                    var interest_rate = echarts.init(document.getElementById('interest-rate'), 'walden')
                    var optionRecords = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['租金', '平均']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: result.data["date"]
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '租金',
                                type: 'line',
                                data: result.data["rent_by_date"],
                                smooth: true
                            },
                            {
                                name: '平均',
                                type: 'line',
                                data: result.data["avg_day"],
                                smooth: true
                            }
                        ]
                    };
                    var monthRecords = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['租金', '平均']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: result.data["date_month"]
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '租金',
                                type: 'line',
                                data: result.data["rent_by_month"],
                                smooth: true
                            },
                            {
                                name: '平均',
                                type: 'line',
                                data: result.data["avg_month"],
                                smooth: true
                            }
                        ]
                    };
                    var interestRecords = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['月年化(%)']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: result.data["date_month"]
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '月年化(%)',
                                type: 'line',
                                data: result.data["interest_by_month"],
                                smooth: true
                            }
                        ]
                    };
                    echartsRecords.setOption(optionRecords);
                    rent_by_month.setOption(monthRecords);
                    interest_rate.setOption(interestRecords);
                    // echarts 窗口缩放自适应
                    window.onresize = function () {
                        echartsRecords.resize();
                        rent_by_month.resize();
                        interest_rate.resize();
                    }
                }
            }, error: function (result) {
                console.log(result);
            }
        });
    });
</script>
